<template>
  <FormContainer :title="title">
    <template #default>
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="customerName">
              <el-input
                v-model="form.customerName"
                class="form-input"
                placeholder="请输入客户姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="form.sex" class="form-radio">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属校区" prop="campus">
              <campusSelect v-model="form.campus" class="form-select" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教育顾问" prop="educationalAdviser">
              <userSelect
                v-model="form.educationalAdviser"
                class="form-select"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年级" prop="grade">
              <el-select
                v-model="form.grade"
                placeholder="请选择年级"
                clearable
                class="form-select"
              >
                <el-option
                  v-for="item in gradeOpiton"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="就读学校" prop="school">
              <el-input
                v-model="form.school"
                class="form-input"
                placeholder="请输入就读学校"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="线索客户来源" prop="sourceOfLeadCustomersId">
              <el-select
                v-model="form.sourceOfLeadCustomersId"
                placeholder="请选择线索客户来源"
                clearable
                @change="(value) => getCustomerSourceOpiton(value)"
                class="form-select"
              >
                <el-option
                  v-for="item in customerSourceOpiton"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源小类" prop="sourceSubcategoryId">
              <el-select
                v-model="form.sourceSubcategoryId"
                placeholder="请选择来源小类"
                clearable
                class="form-select"
              >
                <el-option
                  v-for="item in sourceSubcategoryOpiton"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机" prop="phone">
              <el-input
                v-model="form.phone"
                placeholder="请输入手机号"
                class="form-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人1" prop="contactsOne">
              <el-input
                v-model="form.contactsOne"
                placeholder="请输入联系人1"
                class="form-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="固定电话" prop="telephone">
              <el-input
                v-model="form.telephone"
                placeholder="请输入固定电话"
                class="form-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人2" prop="contactsTwo">
              <el-input
                v-model="form.contactsTwo"
                placeholder="请输入联系人2"
                class="form-input"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="家庭地址" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入家庭地址"
                class="form-input"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首次接触日期" prop="firstTime">
              <el-date-picker
                type="date"
                placeholder="请选择首次接触日期"
                v-model="form.firstTime"
                value-format="yyyy-MM-dd"
                class="form-date-picker"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="需辅导科目" prop="course">
              <el-checkbox-group
                v-model="form.course"
                prop="name"
                class="form-checkbox"
              >
                <el-checkbox label="语文">语文</el-checkbox>
                <el-checkbox label="数学">数学</el-checkbox>
                <el-checkbox label="英语">英语</el-checkbox>
                <el-checkbox label="物理">物理</el-checkbox>
                <el-checkbox label="化学">化学</el-checkbox>
                <el-checkbox label="化学">生物</el-checkbox>
                <el-checkbox label="政治">政治</el-checkbox>
                <el-checkbox label="历史">历史</el-checkbox>
                <el-checkbox label="地理">地理</el-checkbox>
                <el-checkbox label="科学">科学</el-checkbox>
                <el-checkbox label="其他">其他</el-checkbox>
                <el-checkbox label="社政">社政</el-checkbox>
                <el-checkbox label="小学奥数">小学奥数</el-checkbox>
                <el-checkbox label="初中奥数">初中奥数</el-checkbox>
                <el-checkbox label="双语教学">双语教学</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #button>
      <el-button type="primary" @click="handleCreate">保 存</el-button>
    </template>
  </FormContainer>
</template>

<script>
import _ from "lodash";
import moment from "moment";
import campusSelect from "@/components/Select/campusSelect.vue";
import userSelect from "@/components/Select/userSelect.vue";
import {
  getCustomers,
  getCustomerSource,
  customerDetail,
  customerEdit,
} from "@/api/leadManagement/leadClientList";
export default {
  data() {
    return {
      form: {
        customerName: "", // 客户姓名
        sex: "", // 性别
        campus: "", // 所属校区
        educationalAdviser: "", // 教育顾问
        grade: "", // 年级
        school: "", // 就读学校
        sourceOfLeadCustomersId: "", // 线索客户来源
        sourceSubcategoryId: "", // 来源小类
        phone: "", // 手机
        contactsOne: "", // 联系人1
        contactsTwo: "", // 联系人2
        telephone: "", // 固定电话
        address: "", // 家庭地址
        firstTime: moment().format("YYYY-MM-DD"), // 首次接触日期
        course: [], // 需辅导科目
      },
      // 标题
      title: "",
      // 所属校区选项
      campusOptions: [],
      // 年级选项
      gradeOpiton: [],
      // 线索客户来源选项
      customerSourceOpiton: [],
      // 线索小类选项
      sourceSubcategoryOpiton: [],
      //验证规则
      rules: {
        customerName: [
          { required: true, message: "请输入客户姓名", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        grade: [{ required: true, message: "请选择年级", trigger: "blur" }],
        sourceOfLeadCustomersId: [
          { required: true, message: "请选择线索客户来源", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        firstTime: [
          { required: true, message: "请选择首次接触日期", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    campusSelect,
    userSelect,
  },
  mounted() {
    // 获取所属校区选项

    this.gradeOpiton = [
      { value: 0, label: "小一" },
      { value: 1, label: "小二" },
      { value: 2, label: "小三" },
      { value: 3, label: "小四" },
      { value: 4, label: "小五" },
      { value: 5, label: "小六" },
      { value: 6, label: "初一" },
      { value: 7, label: "初二" },
      { value: 8, label: "初三" },
      { value: 9, label: "高一" },
      { value: 10, label: "高二" },
      { value: 11, label: "高三" },
      { value: 12, label: "高四" },
    ];

    // 获取线索客户来源选项
    this.getSourceSubcategoryOpiton();

    const query = this.$route.query;
    if (query.id) this.getData(query.id);
  },
  methods: {
    getData(id) {
      customerDetail(id).then((res) => {
        if (res.code === 200) {
          this.title = "修改线索客户 - " + res.data.customerName;
          this.form = {
            ...res.data,
            firstTime: moment(res.data.firstTime).format("YYYY-MM-DD"), // 格式化首次接触日期
            course: res.data.course ? res.data.course.split(",") : [], // 处理需辅导科目
          };
          this.getCustomerSourceOpiton(this.form.sourceOfLeadCustomersId);
        } else {
          this.$message.error(res.msg || "获取客户信息失败");
        }
      });
    },

    handleCreate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交表单逻辑
          const course = this.form.course.join(",");
          customerEdit({ ...this.form, course }).then((res) => {
            if (res.code === 200) {
              this.$message.success("修改成功");
              this.$router.back();
            } else {
              this.$message.error(res.msg || "修改失败，请稍后再试");
            }
          });
        } else {
          console.log("表单验证失败");
          return false;
        }
      });
    },

    //获取客户线索来源列表
    getSourceSubcategoryOpiton() {
      getCustomers().then((res) => {
        this.customerSourceOpiton = _.map(res.rows, (item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      });
    },
    //获取来源小类列表
    getCustomerSourceOpiton(sourceOfLeadCustomersId) {
      getCustomerSource(sourceOfLeadCustomersId).then((res) => {
        this.sourceSubcategoryOpiton = _.map(res.rows, (item) => {
          return {
            label: item.name,
            value: item.id,
          };
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.form {
  &-input {
    width: 400px;
  }
  &-select {
    width: 400px;
  }

  &-date-picker {
    width: 400px;
  }
}
</style>
